<template>
    <div class="sdy-cart">
        <SdyHeader title="啥都有~购物车" back></SdyHeader>
        <div class="top">
            <van-radio :checked="selectAll" class="select-item" name="1"></van-radio>
        </div>

        <ul class="cart">
            <li v-for="item in cartList" :key="item.proid">
                <van-radio @click="updateStatus(item.cartid, !item.flag)" :checked="item.flag" class="select-item" name="1"></van-radio>
                <van-card
                class="goods-item"
                :price="item.originprice"
                desc="描述信息"
                :title="item.proname"
                :thumb="item.img1">
                <template #tags>
                    <van-tag plain type="primary">-</van-tag>
                    <input class="num-inp" type="text" :value="item.num">
                    <van-tag plain type="primary">+</van-tag>
                </template>
                <template #footer>
                    <van-button size="mini">按钮</van-button>
                    <van-button size="mini">按钮</van-button>
                </template>
                </van-card>
            </li>
        </ul>

        <div class="bottom">
        总价 : {{ totalPrice.toFixed(2) }}
        </div>
        {{ goodsList }}
        <!-- 底部内容 -->
        <Teleport to="#sdy-footer">
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" />
            <van-action-bar-icon @click="$router.push('/order')" icon="cart-o" text="查看订单" />
            <van-action-bar-icon icon="shop-o" text="店铺" />
            <van-action-bar-button @click="addOrderHandler" type="danger" text="生成订单" />
        </van-action-bar>
        </Teleport>
    </div>
</template>

<script setup lang="ts">
    // 验证登录
    import { onMounted, ref, computed } from 'vue'
    import { useRouter, type Router } from 'vue-router'
    import { Dialog } from 'vant'
    import { getCartListApi, updateStatusApi } from '@/api/cart'
    import { addOrderApi } from '@/api/order'
    import { hotSearchApi } from '@/api/goods'
    import type { MyCartItem, MyHotItem } from '@/config/interface'

    const $router: Router = useRouter()

    const token = window.localStorage.getItem('token')
    const user_id = window.localStorage.getItem('user_id')

    // 验证 user_id
    const testToken = () => {
    if (!token || !user_id) {
        Dialog({
        title: '提示',
        message: '您还没有登录'
        }).then(() => {
        $router.push({ path: '/login' })
        })
        return
    }
    }

    // 获取购物车列表
    const cartList = ref<MyCartItem[]>([])
    const getCartList = async () => {
    const res = await getCartListApi(user_id as string)
    cartList.value = res.data
    console.log(res)
    }

    // 获取热门相关内容
    const goodsList = ref<MyHotItem[]>([])
    const getGoodsList = async () => {
    const res = await hotSearchApi()
    goodsList.value = res.data
    }

    // 准备一个全选
    const selectAll = computed(() => {
        return cartList.value.every(item => item.flag)
    })

    // 准备一个总价
    const totalPrice = computed(() => {
        return cartList.value.reduce((prev, item) => {
            if (item.flag) {
            return prev + (item.originprice * item.num)
                } else {
                return prev
                }
        }, 0)
    })

    // 修改购物车选中状态
    const updateStatus = async (id: string, flag: boolean) => {
    const res = await updateStatusApi(id, flag)
    console.log(res)
    if (res.code === '200') {
        getCartList()
    }
    }

    onMounted(() => {
        testToken()
        getCartList()
        getGoodsList()
    })

    // 生成订单
    const addOrderHandler = async () => {
    const res = await addOrderApi(user_id as string)
    console.log(res)
    // 把订单信息存储在 localStorage 内
    window.localStorage.setItem('time', ((res as unknown) as { time: string }).time)
    }

</script>

<style scoped lang="scss">
    .cart {

        li {
            display: flex;
            box-sizing: border-box;
            padding: 0 10px;

            > .select-item {
                width: 30px;
            }

            > .goods-item {
                flex: 1;
            }
        }
    }

    .num-inp {
        widows: 30px;
        text-align: center;
        margin: 0 10px;
    }
</style>